<template>

  
    <a-card :bordered="false">
        <List ref="stateViewList" :formAttributes="formAttributes" axiosUrl="/ThEqStateController/viewList" 
            :dictCodes="defaultSettings.数据字典.区域+','+defaultSettings.数据字典.配电室" :showPagination="false"
            :initQuery="initQuery" :initOrder="initOrder" :isAutoLoad="false">
            <template slot="listItem" slot-scope="state">
           
                <a-card :bordered="false" >
                    <a-card-grid class="cardGrid"  v-for="(item,index) in  state.list" :key="index">
                        <div @click="showTrend(item)" style="cursor: pointer;">
                            <a-row>
                                <span style="font-weight: 500;font-size:13px">
                                    {{dictText(defaultSettings.数据字典.区域,item.deviceRegion)}}
                                    <br/>
                                    {{item.deviceName}}
                                </span>
                            </a-row>
                            <a-row>
                                <a-col :span="10">
                                    <img src="../img/thcgq.png" style="width:50px"/>
                                </a-col>
                                <a-col :span="14">
                                    <a-row style="margin-top:8px;">
                                        <img src="../img/wendu.png" style="width:20px;" />
                                        <span style="font-weight: 500;padding-left:10px;">{{item.deviceTemperature}}°C</span>
                                    </a-row>

                                    <a-row>
                                        <img src="../img/shidu.png" style="width:20px;" />
                                        <span style="font-weight: 500;padding-left:10px;">{{item.deviceHumidity}}%</span>
                                    </a-row>
                                </a-col>
                            </a-row>
                            <a-row>
                                <span v-if="item.lineState===defaultSettings.常量.是">
                                    <img src="../img/zaxian.png" style="width:20px"/>
                                    <span style="font-weight: 500;padding-left:2px;">在线</span>
                                </span>
                                <span v-else>
                                    <img src="../img/lixian.png" style="width:20px"/>
                                    <span style="font-weight: 500;padding-left:2px;">离线</span>
                                </span>
                           
                                <span >
                                    <img v-if="item.alarmState===defaultSettings.常量.是" src="../img/baojing.png" style="width:30px;padding-left:10px;margin-top:-6px;"/>
                                </span>
                            </a-row>

                            <a-row>
                                <div style="display:flex;align-items: center;">
                                    <img src="../img/bianhao.png" style="width:15px">
                                    <span style="height:15px;line-height:15px;margin-left:6px;color:#707070">{{item.deviceNo}}</span>
                                </div>

                                <div style="display:flex;align-items: center;margin-top:6px">
                                    <img src="../img/shijian.png" style="width:15px">
                                    <span style="height:15px;line-height:15px;margin-left:6px;color:#707070">{{item.reportTime}}</span>
                                </div>
                            </a-row>

                        </div>
       
                    </a-card-grid>
                    
                </a-card>
                
            </template>
       
        </List>


        <ExtModal ref="ExtModal"></ExtModal>
    </a-card>
    

    
</template>

<script>

import List from '@/components/lt/Llist'
import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from "@/config/defaultSettings"
import trend from './trend'
import ExtModal from '@/views/system/codeGenerator/ExtModal'
export default {
    name:'eqStateCard',
    components: {List,ExtModal},
    mixins:[SysMixin],
    data(){
        return{
            initDictCodes:defaultSettings.数据字典.区域+','+defaultSettings.数据字典.配电室+','+defaultSettings.数据字典.是否,
            defaultSettings,
            initQuery:[{field:'deviceType',val:'1'}],
            initOrder:[{field:'b.device_order',val:'asc'}],
            // initOrder:[{field:'a.report_time',val:'asc'}],
            formAttributes:[
                {field:'deviceRegion',label:'区域',component:'select',dictCode:defaultSettings.数据字典.区域,condition:'eq'},
                {field:'deviceRoom',label:'电房',component:'select',dictCode:defaultSettings.数据字典.配电室,condition:'eq',parentSelect:'deviceRegion'},
                {field:'deviceNo',label:'采集终端',component:'select',condition:'eq',dictCode:defaultSettings.数据字典.温湿度设备,parentSelect:'deviceRoom'},
                {field:'reportTime',label:'时间',component:'time',condition:'between'},
                {field:'lineState',label:'在线状态',component:'select',condition:'eq',dictCode:defaultSettings.数据字典.是否},
                {field:'alarmState',label:'报警状态',component:'select',condition:'eq',dictCode:defaultSettings.数据字典.是否},
                
            ],
         
            timmer:null,
            interval:1000*60*5,

        }
    },
    mounted(){
        this.$nextTick(() => {
            this.query()
        })
    },
    methods:{
       query(){
        this.$refs['stateViewList'].searchQuery()
        if(this.timmer){
            clearTimeout(this.timmer)
        }
        this.timmer = setTimeout(() => {
            this.query()
        }, this.interval)
       },
       showTrend(item){
        this.sysPageOpen('1919964789616095233',item,'ExtModal',item.deviceName);
       }
    },
    created(){
      
    },
    
}
</script>

<style scoped lang="less">

  .cardGrid{
        margin: 4px;
        border-radius: 10px;
        max-width: 13vw;
        height: 190px;
        padding: 10px;
   }

/* 基础容器 */
        .device-panel {
            width: 13vw;
            min-width: 180px;
            background: #FFFFFF;
            padding: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        /* 顶部设备信息区 */
        .panel-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .device-icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .device-title {
            font-size: 14px;
            color: #333;
            font-weight: 600;
        }

        /* 状态指示区 */
        .status-indicator {
            display: flex;
            gap: 15px;
            margin-bottom: 12px;
        }

        .indicator-item {
            display: flex;
            align-items: center;
        }

        .temp-indicator {
            color: #FF4D4D;
        }

        .humidity-indicator {
            color: #1890FF;
        }

        .indicator-icon {
            font-size: 20px;
            margin-right: 4px;
        }

        /* 底部信息区 */
        .panel-footer {
            border-top: 1px solid #F0F0F0;
            padding-top: 12px;
        }

        .status-offline {
            color: #999;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .device-id {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
        }

        .id-label {
            background: #F0F0F0;
            color: #666;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 6px;
        }

        .id-value {
            color: #333;
            font-size: 13px;
            letter-spacing: 0.5px;
        }

        .l-mark {
            color: #999;
            font-size: 10px;
            text-align: right;
        }
</style>